<!DOCTYPE html>
<html dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Content - Standalone</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/core.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script src="../../../../../dist/ionic.js"></script>
</head>
<body>
  <div class="content-height">
    <ion-content padding>
      <h1>Heading</h1>
      <h2>Heading</h2>
      <h3>Heading</h3>
      <hr>
      <h4>Heading</h4>
      <h5>Heading</h5>
      <h6>Heading</h6>
      <p>Paragraph</p>
    </ion-content>
  </div>

  <div class="content-height">
    <ion-content padding color="secondary">
      <h1>Heading</h1>
      <h2>Heading</h2>
      <h3>Heading</h3>
      <hr>
      <h4>Heading</h4>
      <h5>Heading</h5>
      <h6>Heading</h6>
      <p>Paragraph</p>
    </ion-content>
  </div>

  <div class="content-height">
    <ion-content padding class="custom-color">
      <h1>Heading</h1>
      <h2>Heading</h2>
      <h3>Heading</h3>
      <hr>
      <h4>Heading</h4>
      <h5>Heading</h5>
      <h6>Heading</h6>
      <p>Paragraph</p>
    </ion-content>
  </div>

  <div class="content-height">
    <ion-content padding class="outer-content">
      <h1>Heading</h1>
      <h2>Heading</h2>
      <h3>Heading</h3>
      <hr>
      <h4>Heading</h4>
      <h5>Heading</h5>
      <h6>Heading</h6>
      <p>Paragraph</p>
    </ion-content>
  </div>

  <div class="content-height">
    <ion-content padding class="outer-content">
      <h1>Heading</h1>
      <h2>Heading</h2>
      <h3>Heading</h3>
      <hr>
      <h4>Heading</h4>
      <h5>Heading</h5>
      <h6>Heading</h6>
      <p>Paragraph</p>
    </ion-content>
  </div>

  <style>
    .content-height {
      height: 200px;
    }

    /* TODO should this be in content? */
    ion-content {
      height: 100%;
    }

    .outer-content {
      --background: #f2f2f2;
    }

    .custom-color {
      --background: blue;
      --color: white;
      --hr-background: purple;
    }
  </style>
</body>
</html>
